iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
Modern Web

Spring Boot and React - 前後端 30 天分手日記系列 第 21

Day 21 - React 什麼是Component? 生命週期?

  • 分享至 

  • xImage
  •  

上一章 Day 20 - React 安裝與導入需要的package

Component 是 React 中很重要的一環, 其中包括複雜的生命週期, 與各種不同的寫法

也是初學者最容易搞混的地方, 我們將一一介紹。

Component 的撰寫方式分為ES6 Class Component與Stateless Component

  • Class Component:

    使用ES6 class, 可以控制state, 進行較複雜的操作, 與控制生命週期, 較stateless耗費資源。

  • Stateless Component:

    使用Function Component的寫法, 單純render UI的 stateless component,

    沒有內部狀態, 沒有生命週期函數, render速度較快。

Component 的生命週期:

  • Mounting

    1. componentWillMount()
    2. componentDidMount()
  • Updating

    1. componentWillReceiveProps(object nextProps)
    2. shouldComponentUpdate(object nextProps, object nextState)
    3. componentWillUpdate(object nextProps, object nextState)
    4. componentDidUpdate(object prevProps, object prevState)
  • Unmounting

    1. componentWillUnmount()

一般而言載入Component觸發的順序為:

  1. Consturctor
  2. componentWillMount
  3. compontDidMount

點擊Click或觸發更新state時

  1. componentWillUpdate
  2. componentDidUpdate

生命週期講起來很抽象, 會在之後的教學中實作給大家看

下一章 Day 22 - React 第一個Component


上一篇
Day 20 - React 安裝與導入需要的package
下一篇
Day 22 - React 第一個Component
系列文
Spring Boot and React - 前後端 30 天分手日記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言